<template>
  <div class="chat">
    <div class="msg" v-model="msgList" v-for="item in msgList">
      <div class="name">{{item.name}}</div>
      <div>{{item.msg}}</div>
    </div>
    <div class="input">
      <input style="height: 30px;width: 370px" v-model="msg"></input>
      <button style="width: 100px;height: 40px" @click="send">发消息</button>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'Chat',
    data () {
      return {
        path:"ws://localhost:8081/ws",
        socket:"",
        msgList:[],
        msg:null,
      }
    },
    mounted () {
      // 初始化
      this.init()
    },
    methods: {
      init: function () {
        if(typeof(WebSocket) === "undefined"){
          alert("您的浏览器不支持socket")
        }else{
          // 实例化socket
          this.socket = new WebSocket(this.path);
          // 监听socket连接
          this.socket.onopen = this.open;
          // 监听socket错误信息
          this.socket.onerror = this.error;
          // 监听socket消息
          this.socket.onmessage = this.getMessage
        }
      },
      open: function () {
        console.log("socket连接成功")
      },
      error: function () {
        console.log("连接错误")
      },
      getMessage: function (msg) {
        this.msgList.push({
          'name':'顾客:',
          'msg':msg.data
        })
      },
      send: function () {
        this.socket.send(this.msg);
        this.msgList.push({
          'name' : '本人:',
          'msg': this.msg
        });
        this.msg = ''
      },
      close: function () {
        console.log("socket已经关闭")
      }
    },
    destroyed () {
      // 销毁监听
      this.socket.onclose = this.close
    }
  }
</script>

<style>
  .chat{
    height: 500px;
  }
.name{
  color: #aaa;font-size:12px
}
  .msg{
    margin: 10px 20px;
  }
  .input{
    position: fixed;bottom: 100px;
  }
</style>
